<template>
  <div class="hotPicture">
    <div id="containers" style="height: 600px;width:900px"></div>
     <!-- style="height: 300px;width:600px" -->
  </div>
</template>

<script>
import axios from 'axios';
const echarts = require('echarts')
require('echarts/extension/bmap/bmap');
export default {
  name: 'hotPicture',
  data(){
    return{
      points: [],
      myChart: ''
      // reData:[
      //   [120.14322240845, 30.236064370321, 100], 
      //   [120.14280555506,30.23633761213, 1222], 
      //   [120.14307598649,30.236125905084, 1111],
      //   [120.14301682797,30.236035316745, 67],
      //   [120.1428734612,30.236160551632, 18]
      // ]
    }

  },
  methods: {
    // 创建热力图
    createHot(){
      var dom = document.getElementById("containers");
      this.myChart = echarts.init(dom);
      var app = {}
      // option = null;
      this.points = [
        [117.067237,36.708806, 100], 
        [117.060217,36.702698, 500], 
        [117.052973,36.701673, 50],
        [117.052900,36.701600, 100],
        [117.052999,36.701699, 50]
      ]
      //ROOT_PATH = 'https://echarts.apache.org/examples/'
      // $.get(ROOT_PATH + 'data/asset/data/hangzhou-tracks.json', function (data) {

          // var points = [].concat.apply([], data.map(function (track) {
          //     return track.map(function (seg) {
          //         return seg.coord.concat([1]);
          //     });
          // }));
          
          this.myChart.setOption({
              animation: false,
              bmap: {
                  center: [117.067237,36.708806],
                  zoom: 14,
                  roam: true
              },
              visualMap: {
                  show: false,
                  top: 'top',
                  min: 0,
                  max: 5,
                  seriesIndex: 0,
                  calculable: true,
                  inRange: {
                      color: ['blue', 'blue', 'green', 'yellow', 'red']
                  }
              },
              series: [{
                  type: 'heatmap',
                  coordinateSystem: 'bmap',
                  data: this.points,
                  pointSize: 5,
                  blurSize: 6
              }]
          });
          // 添加百度地图插件
          var bmap = this.myChart.getModel().getComponent('bmap').getBMap();
          bmap.addControl(new BMap.MapTypeControl());

          setTimeout(() => {
            // this.myChart.setOption({
            //   'series[0].data': [[120.14322240845, 30.236064370321, 100], [120.14280555506,30.23633761213, 100], [120.14307598649,30.236125905084, 100],[120.14301682797,30.236035316745, 1],[120.1428734612,30.236160551632, 1]]
            // }, true)
            console.log(1)
            this.myChart.setOption({
              animation: false,
              bmap: {
                  center: [117.067237,36.708806],
                  zoom: 18,
                  roam: true
              },
              visualMap: {
                  show: false,
                  top: 'top',
                  min: 0,
                  max: 5,
                  seriesIndex: 0,
                  calculable: true,
                  inRange: {
                      color: ['blue', 'blue', 'green', 'yellow', 'red']
                  }
              },
              series: [{
                  type: 'heatmap',
                  coordinateSystem: 'bmap',
                  data: [
                    [117.067237,36.708806, 100], 
                    [117.060217,36.702698, 500], 
                    [117.052973,36.701673, 50],
                    [117.052900,36.701600, 100],
                    [117.052999,36.701699, 50],
                    [117.067237,36.708806, 200],
                    [117.067348,36.708806, 200],
                    [117.067357,36.708806, 200],
                    [117.067167,36.708806, 200],
                    [117.067177,36.708806, 200],
                    [117.067287,36.708306, 200],
                    [117.067297,36.708406, 100],
                    [117.066297,36.708606, 200],
                    [117.065297,36.708706, 200],
                    [117.064297,36.708206, 200],
                    [117.063297,36.708606, 200],
                    [117.062297,36.708506, 200],
                    [117.061297,36.708306, 200],
                  ],
                  pointSize: 5,
                  blurSize: 6
              }]
          }, true)
              
          }, 5000)

      // });
      // ;
      // if (option && typeof option === "object") {
           //myChart.setOption(option, true);
      // }
    }
  },
  mounted () {
    // this.common()
    this.createHot()
  }
}

</script>

<style>

</style>
